<div>
    <ul class="title bottom-tab-margin-around">
        <li style="color: #4971FE;">{{'Data_Visualization.Overall.Overall' | translate}}</li>
        <!-- <li>{{'Data_Visualization.Overall.Incident_Analytics' | translate}}</li>
        <li>{{'Data_Visualization.Overall.Traffic_Analytics' | translate}}</li>
        <li>{{'Data_Visualization.Overall.Equipment_Analytics' | translate}}</li> -->
    </ul>
</div>
<div class="body bottom-tab-margin-around">
 
    <itmp-dashboard [data]="dashboardData"></itmp-dashboard>
    <div class="content">
        <div class="row">
            <div class="col">
                <div class="col-title" style="background-color: #2c3056;">
                    {{'Data_Visualization.Overall.Traffic_Situation' | translate}}
                </div>
                <div class="map">
                    <itmp-traffic-situation></itmp-traffic-situation>
                </div>
            </div>
            <div class="col " style="background-color: #2c3057;">
                <div class="col-title"  style="background-color: #2c3056;">
                    {{'Data_Visualization.Overall.Recent_Operational_Notifications' | translate}}
                </div>
                <div class="col-body">
                    <nz-table id="nzTable" #basicTable [nzData]="listOfData" [nzShowPagination]="false"
                              [nzFrontPagination]="false" style="width: 100%" >
                        <thead>
                        <tr class="tableHead"style="background-color: #363d73; color: white;" >
                            <th nzWidth="5%" style="background-color: #363d73; color: white; border-bottom: 2px solid #25294B;"><i class="circle grey"></i></th>
                            <!--<th nzWidth="80px" *ngFor="let item of renderHeader">
                              <span class="sortHead">
                                {{'Data_Visualization.Overall.' +item.name | translate}}
                                <span class="sortSymbol" *ngIf="item.value==='DateTime'">
                                  <span (click)="setSort('desc')" [ngClass]="{'desc':true,'active':sort==='desc'}">↑</span>
                                  <span (click)="setSort('asc')" [ngClass]="{'asc':true,'active':sort==='asc'}">↓</span>
                                </span>
                              </span>
                            </th>-->
                            <th nzWidth="20%"  style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">{{'Data_Visualization.Overall.ID' | translate}}</th>
                            <th nzWidth="20%" style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">{{'Data_Visualization.Overall.Description' | translate}}</th>
                            <th nzWidth="15%" style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">
                                <span class="sortHead">
                                    {{'Data_Visualization.Overall.Data/Time' | translate}}
                                    <span class="sortSymbol">
                                        <span (click)="setSort('desc')"
                                              [ngClass]="{'desc':true,'active':sort==='desc'}">↑</span>
                                        <span (click)="setSort('asc')"
                                              [ngClass]="{'asc':true,'active':sort==='asc'}">↓</span>
                                    </span>
                                </span>
                            </th>
                            <th nzWidth="10%" style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">{{'Data_Visualization.Overall.Location' | translate}}</th>
                            <!-- <th nzWidth="10%" style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;" >{{'Data_Visualization.Overall.Status' | translate}}</th> -->
                            <th nzWidth="10%" style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">{{'Data_Visualization.Overall.View_Details' | translate}}</th>
                            <th style="background-color: #363d73; color: white;border-bottom: 2px solid #25294B;">{{'Data_Visualization.Overall.Map' | translate}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of basicTable.data" (click)="clickTR(data)" style="color: #7D85BB !important;  background-color: #2c3057 !important;">
                            <td style="border-bottom: 2px solid #25294B;"><i class="circle red"></i></td>
                            <td [title]="data.ID"style="border-bottom: 2px solid #25294B;" >
                                <div style="word-break: break-word;max-width: 150px;height: 20px;" class="text-ellipsis"  [title]="data.ID">{{data.ID}}</div>
                            </td>
                            <td style="border-bottom: 2px solid #25294B;">
                                <div style="word-break: break-word;max-width: 150px;height: 20px;" class="text-ellipsis" [title]="data.Description">{{data.Description}}</div>
                            </td>
                            <td  style="border-bottom: 2px solid #25294B;"  [title]=[data.DateTime]>{{data.DateTime | date: 'yyyy/MM/dd HH:mm'}}</td>
                            <td style="border-bottom: 2px solid #25294B;">
                                <div style="word-break: break-word;max-width: 80px;height: 20px;" class="text-ellipsis " [title]="data.Location">{{data.Location}}</div>
                            </td>
                            <!-- <td style="border-bottom: 2px solid #25294B; " *ngIf="data.Status.length>0">
                                <div style="word-break: break-word;min-width: 80px" class="text-ellipsis" [title]="data.Status">{{data.Status}}</div>
                            </td> -->
                            <td style="border-bottom: 2px solid #25294B;">
                                <a [routerLink]="['/ccm/traffic-management/traffic-alert-page', { id: data.ID }]">
                                    <img src="/content/images/icons/viewDetail.png" alt="" style="cursor: pointer;">
                                    <!-- <i class="iconfont icon-dingwei" style="color:#238CE6;cursor: pointer;"></i> -->
                                </a>
                            </td>
                            <td style="border-bottom: 2px solid #25294B;"><i (click)="locationAlert(data.ID)" class="iconfont icon-dingwei cur-p"></i></td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="col-title"  style="background-color: #2c3056;">
                    {{'Data_Visualization.Overall.Incidents_Statistics' | translate}}
                </div>
                <div style="margin-top: -10px;">
                    <itmp-incident></itmp-incident>
                </div>
            </div>
            <div class="col">
                <div class="col-title"  style="background-color: #2c3056;">
                    {{'Data_Visualization.Overall.Alert_Statistics' | translate}}
                </div>
                <div style="margin-top: -10px;">
                    <itmp-alert></itmp-alert>
                </div>
            </div>
        </div>
    </div>
</div>
